<template>
  <div>
    <div class="recommend" id="recommend">
      <ul>
        
        <li v-for="(item,index) in list" :key="item.index" class="li">
          <div class="title">
            <router-link :to='"/userdetails/" + item.user.id'>
            
            <img :src="item.user.photo" alt="">
            <a href="###">{{item.user.name}}</a>
            </router-link>

            <router-link :to='"/blogdetails/" + item.blog.id'>
            <a href="###" class="tit">{{item.blog.title}}</a>
            </router-link>
          </div>
          
          <div class="content">
            <router-link :to='"/blogdetails/" + item.blog.id'>
            <span class="text ql-snow ql-editor" v-html="item.blog.content">
              {{item.blog.content}}
            </span>
            </router-link>
            <span class="icon">
              <i><a href="###" class="iconfont" title="浏览量">&#xe65c;</a>{{item.blog.browse}}</i>
              <i><a href="###" class="iconfont" title="评论" @click="show(index)">&#xe6ab;</a>{{item.blog.comments}}</i>

              <i v-if="!statue[index]"><a href="###" class="iconfont" title="点赞" @click="good(index)">&#xe6d4;</a>{{item.blog.likes}}</i>
              
              <i v-if="statue[index]"><a href="###" class="iconfont" title="取消点赞" @click="good(index)" style="color:skyblue">&#xe6d5;</a>{{item.blog.likes}}</i>

              <i v-if="!favorite[index]"><a href="###" class="iconfont" title="收藏" @click="collect(index)">&#xe690;</a>{{item.blog.favorite}}</i>
              <i v-if="favorite[index]"><a href="###" class="iconfont" title="取消收藏" @click="collect(index)" style="color:skyblue">&#xe6ca;</a>{{item.blog.favorite}}</i>
            </span>
          </div>

          <div class="comment" v-show="shows[index]">
            <ul>
              <li v-show="!list[index].blog.comments"><p>暂无评论</p></li>
              <li v-for="item in listp" :key="item.index">
                <div>
                  <router-link :to='"/userdetails/" + item.user.id'>
                    <img :src="item.user.photo" alt="">{{item.user.name}}：
                  </router-link>
                  {{item.comment.message}} 
                  <i>{{item.comment.createtime.slice(0,10)}}</i>
                  
                </div>
              </li>
              <li>
                <input type="text" placeholder="发表评论" v-model="sendmess">
                <span @click="send(index)"><a href="###">发送</a></span>
              </li>
            </ul>
          </div>

        </li>

        <p v-if="loading" class="warn">加载中...</p>
        <p v-if="noMore" class="warn">没有更多了,我也是有底线的！</p>
    
      </ul>
    </div>
    <div class="main" v-show="empty">
      暂无内容
    </div>
  </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
import {EventBus} from '../../../../static/js/eventBus'
export default {
  name: 'recommend',
  data () {
    return {
      list: [],
      listp: [],
      statue: [],
      favorite: [],
      shows: [],
      user: [],
      sendmess: '',
      empty: false,
      loading: true,
      noMore: false,
      page: 1,
    }
  },

  mounted () {

      // 获取可视区域的高度
      var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 窗口内容实际高度
      var height = document.getElementById("recommend").clientHeight
      // var heightb = document.getElementById("book").clientHeight

      var _this = this
      // console.log(scrollTop,clientHeight,height)
      document.addEventListener('scroll', function () {
        // console.log(window.pageYOffset,clientHeight,height)
        if (window.pageYOffset >= clientHeight + height - 1140) {
          _this.page ++
          // console.log(pag)
          // console.log(_this.page)

          let postData = qs.stringify({
            option: 0,
            page: _this.page
          })

          axios.post(`/api/recommend`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              var newlist = response.data
              // console.log(this.list)
              if(newlist.length == 0) {
                _this.loading = false
                _this.noMore = true
              }

              for (var i = 0; i < newlist.length; i++) {
                _this.list.push(newlist[i])
                _this.statue.push(newlist[i].statue)
                _this.favorite.push(this.list[i].favorite)
                _this.shows.push(false)
              }
              // console.log(this.statue)
              // console.log(this.favorite)
              // console.log(this.list)
            } 

          })

        }
      })

    },

  methods: {
    good (index) {
      if (this.user != "") {
        if(this.statue[index] == 1) {
          this.statue[index] = !this.statue[index]
          let newItem = this.statue[index]
          Vue.set(this.statue, index, newItem)

          let postData = qs.stringify({
            bid: this.list[index].blog.id,
            statue: 1
          })

          axios.post(`/api/likeB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.list[index].blog.likes --
              } 

          })
        } else {
          this.statue[index] = !this.statue[index]
          let newItem = this.statue[index]
          Vue.set(this.statue, index, newItem)

          let postData = qs.stringify({
            bid: this.list[index].blog.id,
            statue: 0
          })

          axios.post(`/api/likeB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
                this.list[index].blog.likes++
              } 

          })

        }
        }
      else {
        this.$message({
          type: 'error',
          message: "请先登录！"
        })
      }
    },

    collect (index) {
      if (this.user != "") {
        if(this.favorite[index] == 1) {
          this.favorite[index] = !this.favorite[index]
          let newItem = this.favorite[index]
          Vue.set(this.favorite, index, newItem)

          let postData = qs.stringify({
            bid: this.list[index].blog.id,
            favorite: 1
          })

          axios.post(`/api/favoriteB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
              this.list[index].blog.favorite--
            } 

          })
        } else {
          this.favorite[index] = !this.favorite[index]
          let newItem = this.favorite[index]
          Vue.set(this.favorite, index, newItem)

          let postData = qs.stringify({
            bid: this.list[index].blog.id,
            favorite: 0
          })

          axios.post(`/api/favoriteB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
              this.list[index].blog.favorite++
            } 

          })

        }
      }
      else {
        this.$message({
          type: 'error',
          message: "请先登录！"
        })
      }
    },

    show (index) {
      if (this.shows[index] == false) {
        for (var i = 0; i < this.list.length; i++) {
          this.shows[i] = false
          this.shows[index] = true
          let newItem = this.shows[index]
          Vue.set(this.shows, index, newItem)
        }

      } else {
        for (var i = 0; i < this.list.length; i++) {
          this.shows[i] = false
          this.shows[index] = false
          let newItem = this.shows[index]
          Vue.set(this.shows, index, newItem)
        }

      }

      let postData = qs.stringify({
        page: 1,
      })

        let id = this.list[index].blog.id

      axios.post(`/api/blog/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.listp = response.data
            console.log(this.listp)
        } 
      })
    },

    send (index) {
      if (this.user != "") {

        let postData = qs.stringify({
          message: this.sendmess,
        })

        let id = this.list[index].blog.id

        axios.post(`/api/blog/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {

            console.log(response.data)
            let postData = qs.stringify({
              page: 1,
            })

              let id = this.list[index].blog.id

            axios.post(`/api/blog/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                this.listp = response.data
                this.list[index].blog.comments ++
                console.log(this.listp)
              } 
            })
          } 

          this.$message({
            type: 'success',
            message: "发表成功！"
          })

        })
      }
      else {
        this.$message({
          type: 'error',
          message: "请先登录！"
        })
      }
      this.sendmess = ""
      this.$router.go(-1)
    },
    
  },

  created () {
    axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.user = response.data
            // console.log(this.user)
          }
        } 

    })

    EventBus.$on('sortlist',(list) => {
      this.list = list;
      if (this.list == "") {
        this.empty = true
      } else {
        this.empty = false
      }
    })
    
    if (this.list == "") {
      let postData = qs.stringify({
        option: 0,
        page: this.page
      })

      axios.post(`/api/recommend`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          // console.log(this.list)

          for (var i = 0; i < this.list.length; i++) {
            this.statue.push(this.list[i].statue)
            this.favorite.push(this.list[i].favorite)
            this.shows.push(false)
          }
          // console.log(this.statue)
          // console.log(this.favorite)
          // console.log(this.list)
        } 

      })
    } 

    // console.log(this.list)

  },
}
</script>

<style lang="stylus" scoped>
.recommend
  width 100%
  min-height 64rem
  margin-top .5rem
  padding-bottom 1rem
  background-color #fff
  ul
    width 100%
    padding-top .2rem
    // background-color skyblue 
    .warn
      width 100%
      text-align center
      margin-top 1rem
      // background-color red
    .li
      width 100%
      line-height 2rem
      margin-top .5rem
      text-indent 1rem
      border 1px #ccc solid
      border-radius 10px
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      background-color #fff
      // background-color #fff
      .title
        width 100%
        margin-top .5rem
        height 2rem
        display -webkit-box
        word-break break-all
        -webkit-box-orient vertical
        -webkit-line-clamp 1
        overflow hidden
        text-overflow ellipsis
        // background-color skyblue
        img 
          height 1.8rem
          width 3%
          margin-left 0%
          border-radius 50%
        .tit
          font-size .9rem
          margin-left .9rem
          font-weight 700
      .content
        height 2rem
        margin-bottom .5rem
        margin-top .5rem
        position relative
        .text
          width 70%
          display -webkit-box
          word-break break-all
          -webkit-box-orient vertical
          -webkit-line-clamp 1
          overflow hidden
          text-overflow ellipsis
          // background-color red
        .icon
          width 30%
          position absolute 
          top 0
          left 70%
          // background-color skyblue
          i  
            // width 6rem
            margin-right 1rem
            font-size .8rem
            color #26a2ff
            // background-color red
      .comment
        width 100%
        height auto
        margin-top 1rem
        position relative
        border-top .1rem #ccc solid
        // background-color red
        ul
          height auto
          li
            width 100%
            font-size .8rem
            margin-bottom .5rem
            // background-color #fff
            div
              width 100%
              padding-left 1rem
              box-sizing border-box
              img
                height 1.2rem
                width 2%
                margin-left 0%
                border-radius 50%
              i
                font-size .7rem
                color #ccc
            input 
              width 80%
              position absolute
              bottom .2rem
              text-indent 1 rem
              font-size .8rem
              border .05rem #ccc solid
            span
              padding .3rem 1rem
              margin-left 85%               
              border .05rem #ccc solid
              background-color #fff
              a
                color #26a2ff
            span:hover
              background-color skyblue
              a
                color #fff
.main
  width 100%
  margin-top -60rem
  text-align center
  font-size 1.3rem
  color #26a2ff
  // background-color red
</style>